<template>
  <div class="index">
    <header class="header">
      <div class="left" @click='home'><img src="../../static/img/arrow.png"></div>
      <div class="center">{{msg}}</div>
      <div class="right"><router-link to='change'>{{pwd}}</router-link></div>
    </header>   

    <ul class="contList">
      <li>
        <article>
          <div class="npt-left">
            <img src="../../static/img/user.png">
          </div>
          <div class="npt-center">
            <input type="text" class="nptex" placeholder="用户名/手机号">
          </div>
          <div class="npt-right"></div>
        </article>
      </li>
      <li>
        <article>
          <div class="npt-left num">
            <img src="../../static/img/key.png">
          </div>
          <div class="npt-center">
            <input type="text" class="nptex" placeholder="密码">
          </div>          
        </article>
      </li>      
    </ul>

    <div class="bound">
      <span>{{msg}}</span>
    </div>
    <div class="enroll"><router-link to='enroll'>立即注册</router-link></div>
    <div class="thrid"><i>或使用第三方登录</i></div>
    <div class="icon">
      <div class="img">
        <img src="../../static/img/sina.png">
        <img src="../../static/img/qq.png">
        <img src="../../static/img/weixin.png">
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'Enter',
    data () {
      return {
        msg: '登录',
        pwd: '忘记密码'
      }
    },
    methods: {
      home: function () {
        this.$router.go(-1)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import  '../assets/css/reset.css';
  @import url(../assets/less/common.less);


  .index{    
     .header {
      position: fixed;
      width: 100%;
      top: 0;
       .px2rem (height,150);       
        background:#1a1a1a;
        display: flex;
        justify-content: center;
        align-items: center;
        .left{
          width: 4em;
          .px2rem (padding-left,30);
          img{
            width: 33%;
          }
        }
        .center{
            flex:1;
            .px2rem (font-size,60);            
            color: #be8f59;
            text-align: center;

        }
        .right{
          a{
            display: block;
            width: 4em;
          color: #be8f59;
          .px2rem (font-size,40);
          .px2rem (padding-right,20);
          }
        }
    }
    .contList{      
      .px2rem (margin-top,184);
      .px2rem (padding-left,45);
      .px2rem (padding-right,45);
      li{                
        border-bottom: 3px solid #ccc;
        .px2rem (height,212);        
        article{
          display: flex;
          .npt-left{
            width: 6em;            
            .px2rem (line-height,212);            
            text-align: center;            
            img{
              width: 33%;              
            }
            &.num{
              img{
                width: 25%;
              }
            }
          }
          .npt-center{
            flex:1;            
            .nptex{
              width: 100%;
              height: 100%;
              .px2rem (font-size,40);
              color: #c0c0c0;
              .px2rem (padding-left,10);
            }
          }
          
        }
      }
    }
    .bound{
      .px2rem (margin-top,100);
      display: flex;
      span{
        background: #1a1a1a;
        .px2rem (width,990);
        .px2rem (height,140);
        .px2rem (margin-left,44);
        .px2rem (margin-right,44);
        .px2rem (border-radius,10);
        color: #be8f59;
        .px2rem (font-size,50);
        text-align: center;
        .px2rem (line-height,140);
      }
    }
    .enroll{
      border-bottom: 1px solid #ccc;
      display: flex;
      .px2rem (height,200);
      a{
        .px2rem (font-size,40);
        .px2rem (line-height,140);
        .px2rem (margin-left,515);
        .px2rem (margin-right,44);        
      }      
    }
    .thrid{       
       .px2rem (width,260);
       .px2rem (height,80);
       background: #ccc;
       color: gray;
       .px2rem (font-size,28);
       text-align: center;
       .px2rem (line-height,80);
       margin: 0 auto;
       .px2rem (margin-top,-40);
    }
    .icon{
      
      .px2rem (margin-top,40);
      .img{
        display: flex;      
        justify-content:center;
        img{
          width: 10%;
          height: 10%;
        }
      
      }
    }


  }
</style>
